<template>
  <div style="padding-top: 40px;padding-bottom: 40px;background-color: #d2af73;">
    <div style="background-color:#000000;border-radius: 8px;width:80%;margin-left:auto;margin-right:auto;">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="item in homeAd" :key="item.title">
          <h3>{{ item.title }}</h3>
          <img :src="item.image"/>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  // 引入 Axios 请求数据
  import Axios from "axios"
  export default {
    data() {
      return {
        homeData: '',
        homeAd: []
      }
    },
    methods: {
      getData() {
      var api = 'http://localhost:7080/api/phone/index';
      Axios.get(api).then((response) => {
        this.homeData = response.data;
        console.log(this.homeData);
        this.homeAd = this.homeData.Ad;
        console.log(this.homeAd);
      }).catch((error) => {
        console.log(error);
      })
    }
    },
    mounted() {
      this.getData();
    },
  }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
</style>